<template>
  <div class="start">
    <h5>精选公开课</h5>
    <span @click="goSearchList">更多></span>
  </div>

  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="热门分类" name="first">
      <template v-if="classs.length >= 10" v-for="(item, index) in 10">
        <div class="img" @click="freeclass(classs[0][index].id)">
          <div>
            <el-image
              style="width: 100%; height: 100%"
              :src="classs[0][index].img"
              fit="fit"
            />
          </div>
          <p>{{ classs[0][index].className }}</p>
          <p>
            {{ classs[0][index].totalVideoTime }}分钟 |
            {{ classs[0][index].teacherId }}
          </p>
          <p>
            <span>
              <template v-if="classs[0][index].classType == 0"> 免费 </template>
              <template v-else> VIP专项 </template> </span
            >近{{ classs[0][index].enlistsNum }}人报名
          </p>
        </div>
      </template>
      <template v-else v-for="(item, index) in classs[0]">
        <div class="img" @click="freeclass(item.id)">
          <div>
            <el-image
              style="width: 100%; height: 100%"
              :src="item.img"
              fit="fit"
            />
          </div>
          <p>{{ item.className }}</p>
          <p>
            {{ item.totalVideoTime }}分钟 |
            {{ item.teacherId }}
          </p>
          <p>
            <span>
              <template v-if="item.classType == 0"> 免费 </template>
              <template v-else> VIP专项 </template> </span
            >近{{ item.enlistsNum }}人报名
          </p>
        </div>
      </template>
    </el-tab-pane>
    <el-tab-pane label="无限" name="second">Config</el-tab-pane>
    <el-tab-pane label="java进阶" name="third">Role</el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import type { TabsPaneContext } from "element-plus";

import { selectOpen } from "@/api/student/he/frontMain";
import router from "@/router";

// const classs: any = reactive([]);
let classs: any = reactive([]);

onMounted(() => {
  selectOpen()
    .then((res) => {
      // classs.push(res.data.data);
      classs.length = 0;
      if ((res.data.msg = "请求成功")) {
        classs.push(res.data.data);
      }
    })
    .catch((e: any) => {
      console.log(e);
    });
});
const activeName = ref("first");

// 去往课程详情
const freeclass = (id: any) => {
  console.log(1111111);

  router.push({
    path: "/FrontFreeClass",
    query: {
      id: id,
    },
  });
};

//去往搜索
const goSearchList = () => {
  router.push("/search");
};
const handleClick = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event);
};
</script>
<style>
h5 {
  text-align: center;
}
.start {
  position: relative;
}
.start span {
  font-size: 12px;
  position: absolute;
  right: 20px;
  /* margin-top: 10px; */
  cursor: pointer;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.el-tabs_content {
  padding: 0;
}
.classify {
  /* display: flex; */
  float: left;
}
.img {
  width: 17%;
  /* height: 300px; */
  margin: 10px;
  display: inline-block;
}
.img > div:first-child {
  height: 100px;
}
.img p {
  font-size: 12px;
  color: black;
}
</style>
